<template>
  <div class="table">
    <div class="header">
      <ul class="ul table_header">
        <li v-for="(item, index) in columns" :key="index">
          {{ item.title }}
        </li>
      </ul>
    </div>

    <div class="body">
      <ul class="ul table_body" v-for="(item, index) in tableData" :key="index">
        <li v-for="(cItem, cIndex) in columns" :key="cIndex">
          {{ item[cItem.dataIndex] }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
import Box from './Box.vue';
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  }
});
</script>
<style lang="less" scoped>
.table {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  .ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 0px;
    margin-bottom: 0px;
  }
  li {
    display: inline-block;
    width: 25%;
    list-style-type: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .header {
    height: 3.125rem;
    .table_header {
      height: 3.125rem;
      background: rgba(22, 73, 143, 0.5);
    }
    .table_header > li:first-child {
      text-align: start;
      padding-left: 1rem;
    }
  }
  .body {
    height: calc(100% - 3.125rem);
    padding-top: 0.375rem;
    overflow-y: auto;
    overflow-x: hidden;
    .table_body {
      height: 2.75rem;
    }
    .table_body > li:first-child {
      text-align: start;
      padding-left: 1rem;
    }
  }
}
</style>
